// .js 和 jsx 都可以作为react里的组件，.jsx 提示更为丰富，.jsx 相当于vue的.vue 文件
// 使用快捷键rfce可以生成函数式组件 ，在react里面有两种组件，第一种函数组件，比较常用，还有一种组件，叫做类组件
// 在react里每一个组件只能有一个根节点
// 在react里使用jsx语法
// jsx 就是html和js的混写，遇到<>解析html，遇到{}解析js
// 在react里循环使用map函数
// 在react里点击事件是onClick , C大写，这种叫合成事件，他不是js里的原生事件，onclick是原生事件
// 在react中组件名必须大写 ！！！ 
// useState声明的是响应式变量，在react中叫状态，状态的改变会引起页面的重新渲染
import React , {useState,useEffect} from 'react' // useState是react提供的hooks,凡是以use开头的，都叫hooks
import Appson from './Appson'
import Appfn from './Appfn'
import Appfn1 from './Appfn1'


const name = "zhyansgan"

const arr = [
    {
        name:"zhangsan",
        age:20
    },
    {
        name:"lissan",
        age:21
    },
    {
        name:"wangwu",
        age:22
    },
]
function App() {
    // const flag = false // 这样生命的变量是非响应式的
    let [flag,setFlag] = useState(true) // 生命了一个叫做flag的变量，setFlag是修改这个变量的方法，变量的初始值为true

  let fn = (index)=>{
      console.log(index);
  }
  let changeFlag = ()=>{
    setFlag(!flag) // setflag 是异步的
   
  }
  let receivefn = (data)=>{ // data就是子组件传递过来的数据
    console.log(data);
  }
  useEffect(()=>{ // 还可以用来模拟生命周期
    console.log(flag);
  },[flag]) // 当依赖项发生变化立即执行useEffct里的函数
  return (
     <>
        <div>{flag?"男":"女"}</div>
        <button onClick={changeFlag}>点击</button>
        <div>
            {
                arr.map((item,index)=>{
                    return <h4 key={index} onClick={()=>{fn(index)}}>{item.name}</h4>
                })
            }
        </div>
        {
            flag ?  <Appson send="我是父组件的数据" send1={flag}></Appson> : ""
        }
        <hr />
        {/* 在子组件标签上自定义一个属性，属性=属性值 */}
        <Appfn send="我是父组件的数据" send1={flag} receivefn={receivefn}></Appfn>
       <hr></hr>
        <Appfn1 send={1111} ></Appfn1>
     </>
    
    
  )
}

export default App